<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>旋转木马-幻灯片</title>
		<link rel="stylesheet" type="text/css" href="../css/Slide.css" />
		<script type="text/javascript" src="../js/jquery-produce-3.1.0.min.js"></script>
		<script type="text/javascript" src="../js/SlideInstans.js"></script>
	</head>

	<body style="padding: 50px;">
		<div class="js_poster poster-main" data-setting='
					        {"width":800,
					         "height":270,
					         "posterWidth":540,
					         "posterHeight":270,
					         "verticalAlign":"middle",
					         "scale":0.9,
					         "speed":500,
					         "autoPlay":true,
					         "delay":1000,
					         "abc":"000"
				            }'>
			<div class="btn prev-btn"></div>

			<ul class="poster-list">
				<li class="poster-item">
					<a href="#"><img src="../img/1.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/2.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/3.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/4.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/5.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/6.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/7.jpg" /></a>
				</li>
			</ul>

			<div class="btn next-btn"></div>
		</div>

		<div class="js_poster poster-main" data-setting='
					        {"width":1000,
					         "height":270,
					         "posterWidth":640,
					         "posterHeight":270,
					         "verticalAlign":"bottom",
					         "scale":0.9,
					         "autoPlay":true,
					         "delay":1000,
					         "speed":1000
				            }'>
			<div class="btn prev-btn"></div>

			<ul class="poster-list">
				<li class="poster-item">
					<a href="#"><img src="../img/1.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/2.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/3.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/4.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/5.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/6.jpg" /></a>
				</li>
				<li class="poster-item">
					<a href="#"><img src="../img/7.jpg" /></a>
				</li>
			</ul>

			<div class="btn next-btn"></div>
		</div>

		<script>
			$(function() {
				//Carousel var c=new Carousel($(".js_poster").eq(0));

				/*var setting={
					        width:1000,
					        height:270,
					        posterWidth:640,
					        posterHeight:270,
					        verticalAlign:"middle",
					        scale:0.9,
					        speed:500
				           };*/

				Carousel.init($(".js_poster"));
			});
		</script>
	</body>

</html>